<!--
 * @Description: 
 * @Author: yyh
 * @Date: 2022-03-05 01:33:57
 * @LastEditors: yyh
 * @LastEditTime: 2022-05-16 12:06:15
-->
<!-- 领用列表页面 -->
<template>
  <div class="use-list">
    <!-- 新增按钮、模糊搜索、查询按钮、导出按钮 -->
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-button class="btn" size="small" type="primary" @click="toAdd"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="searchForm.asset_id"
            style="width: 150px"
            size="small"
            clearable
            placeholder="资产编号"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="searchForm.status"
            style="width: 150px"
            size="small"
            clearable
            placeholder="资产状态"
          >
            <el-option label="未审核" value="未审核" />
            <el-option label="不通过" value="不通过" />
            <el-option label="借用中" value="借用中" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.startTime"
            style="width: 150px"
            size="small"
            type="date"
            placeholder="选择开始日期"
          />
          ~
          <el-date-picker
            v-model="searchForm.endTime"
            style="width: 150px"
            size="small"
            type="date"
            placeholder="选择结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="toSearch"
            ><i class="el-icon-search"></i><span>查询</span></el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            class="export"
            size="small"
            type="success"
            @click="exportExcel"
            ><i class="el-icon-download"></i><span>导出</span></el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格展示数据 -->
    <div>
      <el-table id="table" :data="tableData" border style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="asset_id"
          label="资产编号"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="asset_name"
          label="资产名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="use_department"
          label="领用地点/部门"
          align="center"
        ></el-table-column>
        <el-table-column prop="use_time" label="领用时间" align="center">
          <template slot-scope="scope">
            <div>
              {{ Moment(scope.row.use_time).format("YYYY-MM-DD") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="operator"
          label="经办人"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="check(scope.row.id)"
              v-if="isRole"
              >审批</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: green"
              @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              style="color: red"
              @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 审批模态框 -->
    <div>
      <el-dialog
        title="审批"
        :visible.sync="dialogFormVisible"
        @close="toClose"
      >
        <el-form ref="ruleForm" :rules="rules" :model="formCheck">
          <el-form-item
            prop="check"
            label="审批是否通过"
            :label-width="formLabelWidth"
          >
            <el-select v-model="formCheck.check" placeholder="请选择">
              <el-option label="通过" value="通过"></el-option>
              <el-option label="不通过" value="不通过"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="toSaveCheck">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 新增、编辑模态框 -->
    <div>
      <el-dialog :title="title" :visible.sync="visible" @close="toClose">
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-width="formLabelWidth"
        >
          <el-form-item prop="asset_id" label="资产编号">
            <el-input
              placeholder="请输入内容"
              size="small"
              v-model="form.asset_id"
              clearable
            />
          </el-form-item>
          <el-form-item prop="asset_name" label="资产名称">
            <el-input
              placeholder="请输入内容"
              size="small"
              v-model="form.asset_name"
              clearable
            />
          </el-form-item>
          <el-form-item prop="use_department" label="领用地点/部门">
            <el-input
              placeholder="请输入内容"
              size="small"
              v-model="form.use_department"
              clearable
            />
          </el-form-item>
          <el-form-item prop="use_time" label="领用时间">
            <el-date-picker
              v-model="form.use_time"
              type="date"
              placeholder="领用时间"
              size="small"
              clearable
            />
          </el-form-item>
          <el-form-item prop="operator" label="经办人">
            <el-input
              placeholder="请输入内容"
              size="small"
              v-model="form.operator"
              clearable
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import utilway from "@/api/exportExcel";
import Moment from "moment";
export default {
  data() {
    return {
      // 表格展示数据
      tableData: [],
      isRole: false,
      //表单验证
      rules: {
        asset_id: [
          { required: true, message: "请输入资产编号", trigger: "blur" },
        ],
        asset_name: [
          { required: true, message: "请输入资产名称", trigger: "blur" },
        ],
        use_department: [
          { required: true, message: "请输入领用地点/部门", trigger: "blur" },
        ],
        use_time: [
          { required: true, message: "请选择领用时间", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        operator: [
          { required: true, message: "请输入经办人", trigger: "blur" },
        ],
        check: [{ required: true, message: "请选择是否通过", trigger: "blur" }],
      },
      // 表单数据
      form: {
        asset_id: "",
        asset_name: "",
        use_department: "",
        use_time: "",
        status: "",
        operator: "",
      },
      //审批表单数据
      formCheck: {
        check: "",
      },
      // 模态框标题
      title: "",
      // 模态框的显示与隐藏
      visible: false, //隐藏
      dialogFormVisible: false,
      formLabelWidth: "130px",
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 模糊搜索表单的数据
      searchForm: {
        asset_id: "",
        status: "",
        startTime: "",
        endTime: "",
      },
    };
  },
  watch: {
    // 深度监听分页参数
    params: {
      handler() {
        this.getUseInfo();
      },
      deep: true,
    },
  },
  created() {
    this.getUseInfo();
    this.getIsRole();
  },
  methods: {
    Moment,
    //每页显示的条数法僧变化时的事件处理程序
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    //当前页码发生变化时，事件处理程序
    handleCurrentChange(val) {
      this.params.page = val;
    },
    //分页获取产品数据
    async getUseInfo() {
      var temp = {
        ...this.params,
        ...this.searchForm,
      };
      // 删除属性
      // 遍历对象
      for (const key in temp) {
        // key是属性名  temp[key]属性值
        if (!temp[key]) {
          delete temp[key];
        }
      }
      var res = await this.$http.get("use/getUseInfo", { params: temp });
      this.tableData = res.data.data;
      if (Object.keys(temp).length <= 2) {
        var res = await this.$http.get("use/getUseInfo");
        this.total = res.data.data.length;
      } else {
        var res = await this.$http.get("use/getUseInfo", {
          params: this.searchForm,
        });
        this.total = res.data.data.length;
      }
    },
    // 查询按钮点击事件处理程序
    toSearch() {
      this.getUseInfo();
    },
    //判断审批按钮的显示与隐藏
    getIsRole() {
      if (sessionStorage.getItem("role") === "超级管理员") {
        this.isRole = true;
      } else {
        this.isRole = false;
      }
    },
    //审批按钮事件处理程序
    check(id) {
      this.formCheck = {};
      this.dialogFormVisible = true;
      this.id = id;
    },
    //审批模态框确定按钮事件处理程序
    toSaveCheck() {
      // 获取dom的值，对值进行校验
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.formCheck.check === "通过") {
            let res = await this.$http.get("use/getUseInfoById", {
              params: this.id,
            });
            let form2 = {
              asset_id: res.data.data[0].asset_id,
              status: "使用中",
            };
            let res1 = await this.$http.post(
              "assets/updateAssetsStatus",
              form2
            );
            let form3 = {
              id: this.id,
              status: "使用中",
            };
            let res2 = await this.$http.post("use/updateUseStatus", form3);
            // 提示用户保存成功，刷新表格数据，关闭模态框
            this.$notify.success({
              title: "审批成功",
              message: res.message,
            });
            this.dialogFormVisible = false;
            this.getUseInfo();
          } else if (this.formCheck.check === "不通过") {
            let res = await this.$http.get("use/getUseInfoById", {
              params: this.id,
            });
            let form2 = {
              asset_id: res.data.data[0].asset_id,
              status: "不通过",
            };
            let res1 = await this.$http.post(
              "assets/updateAssetsStatus",
              form2
            );
            let form3 = {
              id: this.id,
              status: "不通过",
            };
            let res2 = await this.$http.post("use/updateUseStatus", form3);
            // 提示用户保存成功，刷新表格数据，关闭模态框
            this.$notify.success({
              title: "审批成功",
              message: res.message,
            });
            this.dialogFormVisible = false;
            this.getUseInfo();
          }
        } else {
          // 校验不通过
          return false;
        }
      });
    },
    //新增按钮事件处理程序
    toAdd() {
      // 清空表单数据
      this.form = {
        status: "未审核",
      };
      this.title = "新增";
      this.visible = true;
    },
    // 编辑按钮事件处理程序
    toEdit(row) {
      // 设置表单数据
      this.form = { ...row };
      this.title = "编辑";
      this.visible = true;
    },
    //模态框确定按钮事件处理程序
    toSave() {
      // 获取dom的值，对值进行校验
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          //修改日期格式
          this.form.use_time = Moment(this.form.use_time).format("YYYY-MM-DD");
          if (this.title === "新增") {
            let res = await this.$http.post("use/addUseInfo", this.form);
            let res1 = await this.$http.get("use/getUseInfoById", {
              params: res.data.data.insertId,
            });
            let form1 = {
              asset_id: res1.data.data[0].asset_id,
              status: res1.data.data[0].status,
            };
            let res2 = await this.$http.post(
              "assets/updateAssetsStatus",
              form1
            );
            // 提示用户保存成功，刷新表格数据，关闭模态框
            this.$notify.success({
              title: "新增成功",
              message: res.message,
            });
            this.visible = false;
            this.getUseInfo();
          } else {
            let res = await this.$http.post("use/updateUseInfo", this.form);
            // 提示用户保存成功，刷新表格数据，关闭模态框
            this.$notify.success({
              title: "编辑成功",
              message: res.message,
            });
            this.visible = false;
            this.getUseInfo();
          }
        } else {
          // 校验不通过
          return false;
        }
      });
    },
    // 关闭模态框
    toClose() {
      // 重置表单验证
      this.$refs.ruleForm.resetFields();
    },
    // 删除按钮事件处理程序
    toDelete(id) {
      this.$confirm("确定删除此条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async (valid) => {
          var res = await this.$http.get("use/deleteUseInfo", {
            params: id,
          });
          if (valid) {
            //提示用户删除成功
            this.$notify({
              title: "删除成功",
              message: res.message,
              type: "success",
            });
            this.getUseInfo();
            this.visible = false;
          } else {
            //提示用户删除失败
            this.$notify({
              title: "删除失败",
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //导出按钮，导出为Excel表格文件
    exportExcel() {
      utilway.exportExcel("table", "资产领用表");
    },
  },
};
</script>

<style>
.btn {
  margin-right: 15px;
}
.block {
  float: right;
}
</style>